import React from "react";
import { Card, Row, Col, Statistic, List, Tag, Space } from "antd";
import {
  BookOutlined,
  FormOutlined,
  ClockCircleOutlined,
  TrophyOutlined,
} from "@ant-design/icons";

const StudentHome: React.FC = () => {
  const mockStats = {
    totalCourses: 5,
    pendingHomework: 3,
    upcomingExams: 2,
    averageScore: 85,
  };

  const mockRecentActivities = [
    {
      id: "1",
      title: "Web开发实践",
      type: "homework",
      content: "作业已提交，等待批改",
      time: "2024-03-15",
    },
    {
      id: "2",
      title: "操作系统",
      type: "exam",
      content: "期中考试即将开始",
      time: "2024-03-20",
    },
    {
      id: "3",
      title: "数据结构",
      type: "score",
      content: "作业1成绩已公布：90分",
      time: "2024-03-10",
    },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <Row gutter={[24, 24]}>
        <Col span={6}>
          <Card>
            <Statistic
              title="我的课程"
              value={mockStats.totalCourses}
              prefix={<BookOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="待完成作业"
              value={mockStats.pendingHomework}
              prefix={<FormOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="即将考试"
              value={mockStats.upcomingExams}
              prefix={<ClockCircleOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="平均成绩"
              value={mockStats.averageScore}
              prefix={<TrophyOutlined />}
              suffix="分"
            />
          </Card>
        </Col>
      </Row>

      <Card title="最近动态" style={{ marginTop: 24 }}>
        <List
          dataSource={mockRecentActivities}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                title={item.title}
                description={
                  <Space>
                    <Tag
                      color={
                        item.type === "homework"
                          ? "blue"
                          : item.type === "exam"
                            ? "red"
                            : "green"
                      }
                    >
                      {item.type === "homework"
                        ? "作业"
                        : item.type === "exam"
                          ? "考试"
                          : "成绩"}
                    </Tag>
                    <span>{item.content}</span>
                    <span>{item.time}</span>
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  );
};

export default StudentHome;
